<template>
    <div class="header">
        <span class="userPic"></span>
        <el-dropdown class="userDown" trigger="click" @command="commandFn">
            <el-button type="text" class="userBtn">
                {{ userName }}({{ supplierCode }})
                <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'Header',
    data() {
        return {};
    },
    computed: {
        ...mapState(['userName', 'supplierCode'])
    },
    methods: {
        commandFn() {
            let token = sessionStorage.getItem('token');
            if (token) {
                sessionStorage.removeItem('token');
                this.$router.push('/login');
            }
        }
    }
};
</script>

<style lang="less">
.header {
    height: 48px;
    width: 175px;
    float: right;
    .userPic {
        display: inline-block;
        width: 18px;
        height: 15px;
        background: url('../../assets/img/userPic.png') no-repeat center;
        margin-right: 8px;
    }
    .userDown {
        width: 134px;
    }
    /deep/ .userBtn {
        font-size: 14px;
        font-family: SourceHanSansCN, SourceHanSansCN-Regular;
        font-weight: 400;
        text-align: left;
        color: rgba(0, 0, 0, 0.65);
        line-height: 21px;
    }
}
.el-dropdown-menu {
    width: 178px !important;
    padding: 5px 0 !important;
    margin-top: 5px !important;
}
</style>
